<template>
	<view>
		<view style="background-color: #11CC99;padding-bottom: 10px;">
			<view style="padding-left: 20px;display: flex;justify-content:space-between;padding-right: 10px;padding-top:20px">
				<span style="font-size: 20px;font-weight: 700;">运维单</span>
				<view>
					<text :class="pageFlag ? 'text-white' : 'text-black'" class="xl cuIcon-rankfill" style="font-size: 20px;" @click="changeImagePage"></text>
					<!-- <text :class="pageFlag ? 'text-black' : 'text-white'" class="xl  cuIcon-formfill" style="margin-left: 20px;font-size: 20px;" @click="changeListPage"></text> -->
				</view>
			</view>
			<scroll-view scroll-x class=" nav text-center">
				<view class="cu-item" :class="'0'==TabCur?'text-black cur':''" @tap="tabSelect" data-id="0">
					<text ></text> 全部
				</view>
				<view class="cu-item" :class="'1'==TabCur?'text-black cur':''" @tap="tabSelect" data-id="1">
					<text ></text> 今天
				</view>
				<view class="cu-item" :class="'2'==TabCur?'text-black cur':''" @tap="tabSelect" data-id="2">
					<text ></text> 昨天
				</view>
				<view class="cu-item" :class="'3'==TabCur?'text-black cur':''" @tap="tabSelect" data-id="3">
					<text ></text> 7天
				</view>
				<view class="cu-item" :class="'4'==TabCur?'text-black cur':''" @tap="tabSelect" data-id="4">
					<text ></text> 30天
				</view>
			</scroll-view>
		</view>
		
		
		<view style="margin-top: 10px;margin-left: 40upx;margin-right: 40upx;" v-if="!pageFlag">
			<view style="display: flex;">
				<text class="lg text-gray cuIcon-titles" style="color: #000000;"></text>
				<view>
					<text>已完成</text>
				</view>
				<text class="text-black cuIcon-triangledownfill" style="font-size: 25px;margin-top: -12px;"></text>
			</view>
			<view>
				<uni-collapse style="border-radius: 6px;">
					<uni-collapse-item title="水污染超标" subTitle="深圳市南山区桃源街道35295">
						<view style="display: flex;justify-content: space-between;">
							<view style="width: 75%;">
								<view style="color: #B7BBBE;">站点标识：{{dataList.operator}}</view>
								<view style="color: #B7BBBE;">排放类型：{{dataList.phoneNumber}}</view>
								<view style="color: #B7BBBE;">站点状态：{{dataList.shartTime}}</view>
								<view style="color: #B7BBBE;">开始时间：{{dataList.endTime}}</view>
							</view>
							<button style="color: #000000;background-color: #11CC99;border-radius: 10px 0px 0px 10px;height: 30px;" size="mini" type="primary">审核中</button>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse style="margin-top: 10px;border-radius: 6px;">
					<uni-collapse-item title="定期设备检修5" subTitle="深圳市南山区桃源街道35295">
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse style="margin-top: 10px;border-radius: 6px;">
					<uni-collapse-item title="水污染预警" subTitle="深圳市南山区桃源街道35295">
						<view style="display: flex;justify-content: space-between;">
							<view style="width: 75%;">
								<view style="color: #B7BBBE;">运维人员：{{dataList.operator}}</view>
								<view style="color: #B7BBBE;">手机号码：{{dataList.phoneNumber}}</view>
								<view style="color: #B7BBBE;">开始时间：{{dataList.shartTime}}</view>
								<view style="color: #B7BBBE;">结束时间：{{dataList.endTime}}</view>
							</view>
							<button style="color: #000000;background-color: #11CC99;border-radius: 10px 0px 0px 10px;height: 30px;" size="mini" type="primary">运维中</button>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<uni-collapse style="margin-top: 10px;border-radius: 6px;">
					<uni-collapse-item title="定期设备检修" subTitle="深圳市南山区桃源街道35295">
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		
		
		<view style="margin-top: 10px;margin-left: 40upx;margin-right: 40upx;" v-else>
			<view style="display: flex;">
				<text class="lg text-gray cuIcon-titles" style="color: #000000;"></text>
				<view>
					<text>运维任务</text>
				</view>
			</view>
			<view class="qiun-charts" style="background-color: #FFFFFF;">
				<canvas style="background-color: #FFFFFF;" canvas-id="canvasRing" id="canvasRing" class="charts" ></canvas>
			</view>
			<view class="margin-top">巡检任务</view>
			<view class="flex">
				<view class="cu-progress round">
					<view :style="mapStyle[0]"></view>
				</view>
				<text class="margin-left">{{textarea.series[0].data}}</text>
			</view>
			<view class="margin-top">比对任务</view>
			<view class="flex">
				<view class="cu-progress round">
					<view :style="mapStyle[1]"></view>
				</view>
				<text class="margin-left">{{textarea.series[1].data}}</text>
			</view>
			<view class="margin-top">故障任务</view>
			<view class="flex">
				<view class="cu-progress round">
					<view :style="mapStyle[2]"></view>
				</view>
				<text class="margin-left">{{textarea.series[2].data}}</text>
			</view>
			<view class="margin-top">其它任务</view>
			<view class="flex">
				<view class="cu-progress round">
					<view :style="mapStyle[3]"></view>
				</view>
				<text class="margin-left">{{textarea.series[3].data}}</text>
			</view>
			
			<!-- <view class="margin-top" style="display: flex;">
				<text class="lg text-gray cuIcon-titles" style="color: #000000;"></text>
				<view>
					<text>运维任务</text>
				</view>
			</view>
			<view class="qiun-charts" >
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
			<view class="margin-top">超标</view>
			<view class="flex">
				<view class="cu-progress round">
					<view style="background:#8BB2F3;width:67%"></view>
				</view>
				<text class="margin-left">67%</text>
			</view>
			<view class="margin-top">预警</view>
			<view class="flex">
				<view class="cu-progress round">
					<view style="background:#F18B86;width:23%"></view>
				</view>
				<text class="margin-left">23%</text>
			</view>
			<view class="margin-top">定期</view>
			<view class="flex margin-bottom">
				<view class="cu-progress round">
					<view style="background:#F2D67A;width:10%"></view>
				</view>
				<text class="margin-left">10%</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uCharts from '@/components/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	import Util from '@/utils/util.js';
	import {
		formatDateDay
	} from '@/utils/datetime.js'
	var _self;
	var canvaRing=null;
	var canvaLineA=null;
	
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				pageFlag: true,
				TabCur: '0',
				scrollLeft: 0,
				dataList: {
					operator: "2435239523",
					phoneNumber: "环境水污染",
					shartTime: "ph值超标",
					endTime: "2020.11.22 10:23:44"
				},
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:[],
				mapStyle:[],
				startTime:'',
				endTime:''
			};
		},
		onLoad() {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
			// this.getServerData1();
		},
		methods:{
			tabSelect(e) {
				let now = new Date()
				let userInfo = Util.getUserInfo();
				//运维数据统计
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if(this.TabCur === '0'){
					if(this.pageFlag){
						//加载统计数据
						this.getServerData();
					}else{
						//加载运维列表数据
						
					}
				}else{
					if(this.TabCur === '1'){
						this.startTime = formatDateDay(now.getTime()) + " 00:00:00"
						this.endTime = formatDateDay(now.getTime()) + " 23:59:59"
					}else if(this.TabCur === '2'){
						let cDate = new Date(now.getTime() - (1000 * 60 * 60 * 24))
						this.startTime = formatDateDay(cDate.getTime()) + " 00:00:00"
						this.endTime = formatDateDay(now.getTime()) + " 23:59:59"
					}else if(this.TabCur === '3'){
						let cDate = new Date(now.getTime() - (1000 * 60 * 60 * 24 * 7))
						this.startTime = formatDateDay(cDate.getTime()) + " 00:00:00"
						this.endTime = formatDateDay(now.getTime()) + " 23:59:59"
					}else if(this.TabCur === '4'){
						let cDate = new Date(now.getTime() - (1000 * 60 * 60 * 24 * 30))
						this.startTime = formatDateDay(cDate.getTime()) + " 00:00:00"
						this.endTime = formatDateDay(now.getTime()) + " 23:59:59"
					}
					if(this.pageFlag){
						//加载统计数据
						this.getServerData({startTime:this.startTime,endTime:this.endTime,userId:userInfo.userId});
					}else{
						//加载运维列表数据
						
					}
				}
				
			},
			changeImagePage(){
				this.pageFlag = true;
				this.getServerData();
				// this.getServerData1(); //趋势图数据
			},
			changeListPage(){
				this.pageFlag = false;
			},
			// 获取数据，发请求
			getServerData1(){
				let LineA={categories:[],series:[]};
				LineA.categories=['08:00','12:00','16:00','20:00'];
				LineA.series=[{
					name:"南京",
					data:[0.5,0.9,1.2,1.6,1.0,1.4],
					color:'#8BB2F3'
				},{
					name:"苏州",
					data:[0.5,1.0,0.5,0.7,1.1,0.8],
					color:'#F18B86'
				},{
					name:"苏州",
					data:[0.5,0.7,0.5,1.1,1.1,0.8],
					color:'#F2D67A'
				}];
				_self.showLineA("canvasLineA",LineA);
			},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize:11,
					legend:{show:false},
					dataLabel:false,
					dataPointShape:false,
					background:'#00C600',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					title: {
						name: "超标数据（小时）",
						fontSize: '10'
					}, 
					// x轴显示的内容
					xAxis: {
						disableGrid:true,
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:6,
					},
					// y轴显示的内容
					yAxis: {
						disableGrid:true,
						calibration:true,
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:4,
						min:0,
						max:2,
						format:(val)=>{return val.toFixed(1)}
					},
					width: uni.upx2px(750),
					height: uni.upx2px(500),
					extra: {
						line:{
							type: 'curve',
							width: '5'
						}
					}
				});
				
			},
			getServerData(params){
				let userInfo = Util.getUserInfo();
				let paraminfo = params || {userId:userInfo.userId}
				//加载顶部统计信息
				Util.request('/monitor/taskInfo/app/opCount/op', paraminfo, 'GET').then((res) => {
					let dataa = {
					  "series": [{
						"name": "巡检",
						"data": 0,
						"color": "#53C8E7"
					  }, {
						"name": "比对",
						"data": 0,
						"color": "#8BB2F3"
					  }, {
						"name": "故障",
						"data": 0,
						"color": "#F2D67A"
					  }, {
						"name": "其它",
						"data": 0,
						"color": "#f2b783"
					  }],
					  "total": 0
					};
					res.data.map(item => {
						if(item.taskType==='xunjian'){
							dataa.series[0].data= parseInt(item.total)
						}else if(item.taskType==='bidui'){
							dataa.series[1].data= parseInt(item.total)
						}else if(item.taskType==='weixiu'){
							dataa.series[2].data= parseInt(item.total)
						}else if(item.taskType==='qita'){
							dataa.series[3].data= parseInt(item.total)
						}
						dataa.total = dataa.total+ parseInt(item.total)
					})
					
					let Ring={series:[]};
					_self.mapStyle = []
					//这里我后台返回的是数组，所以用等于，如果您后台返	回的是单条数据，需要push进去
					Ring.series=dataa.series;
					//自定义文案示例，需设置format字段
					for(let i = 0 ;i < Ring.series.length;i++){
						let tempVal = parseFloat((Ring.series[i].data/(dataa.total === 0 ? 1 : dataa.total))*100).toFixed(2)
						Ring.series[i].format=()=>{return tempVal + '%'};
						_self.mapStyle.push('background:'+Ring.series[i].color+';width:'+tempVal + '%') 
					}
					_self.textarea = dataa;
					_self.showRing("canvasRing",Ring);
				})
			},
			showRing(canvasId,chartData){
				canvaRing=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'ring',
					fontSize:11,
					padding:[5,5,5,5],
					legend:{
						show:true
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 20*_self.pixelRatio,
						  labelWidth:15
						}
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.qiun-charts {
		width: 670upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 670upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
